<template>
  <div class="w-[1150px] print-style relative bg-white h-full">
    <div class="text-2xl">
      <div class="flex justify-between items-center w-[220px] pl-5">
        <div class="font-semibold text-[18px]">{{ formatData[0]?.name }}</div>
        <div class="flex">
          <div class="ml-5 text-[18px]">{{ formatData[0]?.xb }}</div>
          <div class="text-[18px]">{{ formatData[0]?.nl }}</div>
        </div>
        <div class="ml-5 text-[18px]">{{ formatData[0]?.applyPath ? '住院' : '门诊' }}</div>
      </div>
      <BaseBarcode v-if="formatData.length" :code-width="1.8" :value="formatData[0].barCode" />
      <div class="w-[220px] text-center text-[18px]">{{ formatData[0]?.categroyName }}</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})

const formatData = ref([])

watch(
  () => props.printData,
  () => {
    if (props.printData.printData?.detail.length) {
      formatData.value = props.printData.printData?.detail
    }
  }
)
</script>
<style lang="less" scoped>
@media print {
  @page {
    size: 21cm 29.7cm;
  }
}
</style>
